<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .box {
        width: 500px;
        height: 400px;
        border: 1px solid #000;
        position: relative;
        margin: auto;
        overflow: hidden;
        cursor: pointer;
    }

    .box ul,
    .box ol {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .box ul li {
        width: 500px;
        height: 400px;
        display: none;
    }

    .box ul li img {
        width: 500px;
        height: 400px;
    }

    .box ol {
        width: 120px;
        position: absolute;
        left: 50%;
        margin-left: -40px;
        bottom: 20px;
        height: 20px;
        background: #fff;
        display: flex;
        justify-content: space-evenly;
        padding: 10px 0;
        border-radius: 20px;
    }

    .box ol li {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #f00;
        border: 1px solid #999;
    }

    .box ol li.current {
        background: #00f;
    }

    .box ul li.current {
        display: block;
    }

    .box .left,
    .box .right {
        position: absolute;
        top: 50%;
        width: 30px;
        height: 30px;
        margin-top: -15px;
        background: #ccc;
        text-align: center;
        line-height: 30px;
        text-decoration: none;
        font-weight: bold;
        color: #fff;
    }

    .left {
        left: 0;
    }

    .right {
        right: 0;
    }
</style>

<body>
    <div class="box">
        <ul>
            <li class="current"><img src="1 .jpg" alt=""></li>
            <li><img src="2.jpg" alt=""></li>
            <li><img src="3.jpg" alt=""></li>
            <li>
                <img src="4.jpg" alt="">
            </li>
        </ul>
        <ol>
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
        <a href="javascript:;" class="left">&lt;</a>
        <a href="javascript:;" class="right">&gt;</a>
    </div>
</body>
<script type="text/javascript">
    /*
        实现功能
        1、自动切换图片 保证小圆点跟随
        2、上一张下一张点击切换图片  小圆点也需要跟随
        3、点击小圆点 切换到对应的图片
    */
    var li_Dom = document.querySelectorAll('ul>li'); //图片对象
    var ol_Dom = document.querySelectorAll('ol>li'); //小圆点对象
    var timer;
    var i = 0;
    function img(number) { //包装一个函数 播放图片和小圆点跟随
        document.querySelector('ul>.current').className = "";
        li_Dom[number].className = `current`;
        document.querySelector('ol>.current').className = "";
        ol_Dom[number].className = `current`;
    }
    play();
    function play() { //自动播放
        timer = setInterval(() => {
            img(i);
            i >= 3 ? i = 0 : i++;
        }, 2000)
    }
    //左边
    document.querySelector(`.left`).addEventListener('click',()=>{
        i==0?i=3:i-- // 因为每次倒计时结束后i++ 所以要减下去
        clearInterval(timer); //清除自动播放
        let j = i<=0?3:i-=1; //获取倒退需要的图片
        img(j); //显示点击图片
        play(); //重新播放
    })
    //右边
    document.querySelector(`.right`).addEventListener('click',()=>{
        clearInterval(timer);
        let j = i>=3?0:i++;
        img(j);
        play();
    })
    //点击小圆点
    ol_Dom.forEach((item, index) => {  //点击小圆点
        item.addEventListener('click', () => {
            clearInterval(timer);
            img(index);
            i = index;
            play();
        })
    })


</script>

</html>